<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/axios.min.js"></script>
</head>
<body>
    <button>get</button>
    <button>post</button>
    <button>put</button>
    <button>patch</button>
    <button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
	btns[0].onclick = async function(){
		// axios接收的第一个参数即是配置对象 configOptions
		// axios({
        //     url:"http://zhangpeiyue.com/scoreList"
        // })

        // 传递参数
        // axios({
        //     url:"http://zhangpeiyue.com/scoreList?age=12&sex=男"
        // })

        // 传递参数
		// axios({
		// 	url:"http://zhangpeiyue.com/scoreList",
        //     // 类型是一个对象，可以将对象转为urlencoded格式，再与url进行拼接
        //     // urlencoded======>age=12&sex=男
        //     // http://zhangpeiyue.com/scoreList?age=12&sex=男
        //     params:{
		// 		age:12,
        //         sex:"男"
        //     }
		// })

        // 默认的请求方式是get
		// axios({
        //     // 指定请求方式
        //     method:"post",
		// 	url:"http://zhangpeiyue.com/scoreList",
		// 	// 类型是一个对象，可以将对象转为urlencoded格式，再与url进行拼接
		// 	// urlencoded======>age=12&sex=男
		// 	// http://zhangpeiyue.com/scoreList?age=12&sex=男
		// 	params:{
		// 		age:12,
		// 		sex:"男"
		// 	}
		// })


        // 请求头
		// axios({
        //     headers:{
		// 		token:"abc"
        //     },
		// 	url:"http://zhangpeiyue.com/scoreList",
		// 	// 类型是一个对象，可以将对象转为urlencoded格式，再与url进行拼接
		// 	// urlencoded======>age=12&sex=男
		// 	// http://zhangpeiyue.com/scoreList?age=12&sex=男
		// 	params:{
		// 		age:12,
		// 		sex:"男"
		// 	}
		// })




        // 获取响应信息
        // axios返回的是一个Promise实例
        // const p = axios({
        //     url:"http://zhangpeiyue.com/scoreList"
        // });
		// p.then(value=>{
		// 	// config:配置对象
		// 	// data：响应体
		// 	// headers：响应头
		// 	// request：xhr实例
		// 	// status:状态码
		// 	// statusText：状态码说明
		// 	console.log(value.data);
        // })

        // 处理异常
		// const p = axios({
		// 	url:"http://zhangpeiyue.com/scoreList"
		// });
		// p.then(value=>{
		// 	console.log(value.data);
		// }).catch(err=>{
		// 	console.log(err);
        // })

        // 链式调用
		// axios({
		// 	url:"http://zhangpeiyue.com/scoreList"
		// }).then(value=>{
		// 	console.log(value.data);
		// }).catch(err=>{
		// 	console.log(err);
		// })

        // async await
        // const {data} = await axios({
        //     url:"http://zhangpeiyue.com/scoreList"
        // });
		// console.log(data);

        // get: 第一个参数是请求地址，第二个参数是配置对象
        // const response = await axios.get("http://zhangpeiyue.com/scoreList");
		// console.log(response.data);// 响应体


		const response = await axios.get("http://zhangpeiyue.com/scoreList",{
			headers:{
				token:"abc"
            },
			params:{
				age:12
			},
        });
		console.log(response.data);// 响应体
    }

	btns[1].onclick = async function(){
		// 非简写
        // axios({
        //     // 请求方式
        //     method:"post",
        //     // 请求地址
        //     url:"http://zhangpeiyue.com/scoreList",
        //     // 请求头
        //     headers:{
		// 		token:"abc"
        //     },
        //     params:{
		// 		age:12
        //     },
        //     // 请求体
        //     // data的值设置为对象，请求体的格式即是application/json
        //     // data:{
		// 	// 	username:"黄景瑜",
        //     //     age:20
        //     // }
        //
        //     // data的值设置为字符串，请求体的格式即是application/x-www-form-urlencoded
        //     data:"username=蔡徐坤&age=12"
        // }).then(value=>{
		// 	console.log(value.data);
        // })

		// 简写
        // 第一个参数是请求地址，第二个参数是请求体，第三个参数配置对象
        // const {data} = await axios.post("http://zhangpeiyue.com/scoreList",{
		// 	username:"张艺兴",
        //     age:20
        // },{
		// 	headers:{
		// 		token:"abc",
        //     },
        //     params:{
		// 		age:12
        //     }
        // });
		// console.log(data);

    }

	btns[2].onclick = async function(){
		// 完整修改
		const {data} = await axios.put("http://zhangpeiyue.com/scoreList/1",{
			username:"刘德华",
            age:60
        });
		console.log(data);
    }

	btns[3].onclick = async function(){
		// patch:部分修改
		const {data} = await axios.patch("http://zhangpeiyue.com/scoreList/2",{
			userName:"古天乐",
			age:78
		});
		console.log(data);
    }

	btns[4].onclick = async function(){
		// 第一个参数是请求地址，第二个参数是配置对象
		const {data} = await axios.delete("http://zhangpeiyue.com/scoreList/5");
		console.log(data);
    }

	// axios：是一个库，可以通过这个库来发送ajax请求
    // ajax:是一种数据的请求方式

</script>
</html>